<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客 - Bootstrap练习</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 自定义CSS -->
    <style>
        /* 自定义样式 */
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
        }

        body {
            font-family: 'Georgia', serif;
            line-height: 1.6;
            color: #333;
            background-color: #f9f9f9;
        }

        /* 导航栏 */
        .navbar-custom {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .navbar-brand {
            font-family: 'Helvetica Neue', sans-serif;
            font-weight: 700;
            font-size: 1.5rem;
        }

        .nav-link {
            font-weight: 500;
        }

        /* 博客头部 */
        .blog-header {
            background-color: var(--secondary-color);
            color: white;
            padding: 100px 0;
            text-align: center;
            margin-bottom: 50px;
            background-image: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.8)), url('https://via.placeholder.com/1920x600');
            background-size: cover;
            background-position: center;
        }

        .blog-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 20px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .blog-description {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto;
            opacity: 0.9;
        }

        /* 博客内容 */
        .blog-container {
            margin-top: 30px;
        }

        /* 博客文章卡片 */
        .blog-post {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 40px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .blog-post:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .post-image {
            height: 250px;
            object-fit: cover;
            width: 100%;
        }

        .post-body {
            padding: 30px;
        }

        .post-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--secondary-color);
        }

        .post-meta {
            color: #7f8c8d;
            margin-bottom: 20px;
            font-size: 0.9rem;
        }

        .post-meta i {
            margin-right: 5px;
        }

        .post-meta span {
            margin-right: 15px;
        }

        .post-excerpt {
            margin-bottom: 20px;
        }

        .read-more {
            color: var(--primary-color);
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }

        .read-more i {
            margin-left: 5px;
            transition: transform 0.3s;
        }

        .read-more:hover i {
            transform: translateX(5px);
        }

        /* 侧边栏 */
        .sidebar {
            position: sticky;
            top: 20px;
        }

        .sidebar-widget {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            padding: 25px;
            margin-bottom: 30px;
        }

        .widget-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f1f1f1;
            color: var(--secondary-color);
        }

        .about-me img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 20px;
            display: block;
        }

        .category-list, .tag-list {
            list-style: none;
            padding: 0;
        }

        .category-list li, .tag-list li {
            margin-bottom: 10px;
        }

        .category-list a, .tag-list a {
            color: #333;
            text-decoration: none;
            transition: color 0.3s;
            display: block;
            padding: 5px 0;
        }

        .category-list a:hover, .tag-list a:hover {
            color: var(--primary-color);
        }

        .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .tag-list a {
            background-color: #f1f1f1;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
        }

        .tag-list a:hover {
            background-color: var(--primary-color);
            color: white;
        }

        /* 分页 */
        .pagination {
            justify-content: center;
            margin-top: 30px;
        }

        .page-link {
            color: var(--secondary-color);
            border: none;
            margin: 0 5px;
            border-radius: 5px !important;
        }

        .page-item.active .page-link {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        /* 页脚 */
        .blog-footer {
            background-color: var(--secondary-color);
            color: white;
            padding: 50px 0 20px;
            margin-top: 50px;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-links a:hover {
            color: white;
        }

        .social-icons a {
            color: white;
            font-size: 1.2rem;
            margin-right: 15px;
            transition: transform 0.3s;
        }

        .social-icons a:hover {
            transform: translateY(-5px);
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light navbar-custom sticky-top">
    <div class="container">
        <a class="navbar-brand" href="#">
            <i class="fas fa-pen-fancy me-2"></i>我的博客
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">技术</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">生活</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">旅行</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">关于</a>
                </li>
            </ul>
            <form class="d-flex">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="搜索文章...">
                    <button class="btn btn-outline-secondary" type="button">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</nav>

<!-- 博客头部 -->
<header class="blog-header">
    <div class="container">
        <h1 class="blog-title">探索技术与生活</h1>
        <p class="blog-description">分享编程知识、生活感悟和旅行见闻</p>
    </div>
</header>

<!-- 主要内容 -->
<div class="container blog-container">
    <div class="row">
        <!-- 文章列表 -->
        <div class="col-lg-8">
            <!-- 文章1 -->
            <article class="blog-post">
                <img src="https://pic.rmb.bdstatic.com/bjh/material/231214/006303858b5dd8638cabb950cf14722b4320.png" alt="文章图片" class="post-image">
                <div class="post-body">
                    <h2 class="post-title">前端开发的最新趋势</h2>
                    <div class="post-meta">
                        <span><i class="far fa-calendar-alt"></i> 2023年6月15日</span>
                        <span><i class="far fa-folder-open"></i> 技术</span>
                        <span><i class="far fa-comments"></i> 12条评论</span>
                    </div>
                    <p class="post-excerpt">随着Web技术的不断发展，前端开发领域也在快速演进。本文将探讨2023年最值得关注的前端开发趋势，包括Web组件、微前端架构、低代码平台等新兴技术...</p>
                    <a href="#" class="read-more">继续阅读 <i class="fas fa-arrow-right"></i></a>
                </div>
            </article>

            <!-- 文章2 -->
            <article class="blog-post">
                <img src="https://pic.rmb.bdstatic.com/bjh/material/231214/006303858b5dd8638cabb950cf14722b4320.png" alt="文章图片" class="post-image">
                <div class="post-body">
                    <h2 class="post-title">我的日本旅行日记</h2>
                    <div class="post-meta">
                        <span><i class="far fa-calendar-alt"></i> 2023年5月22日</span>
                        <span><i class="far fa-folder-open"></i> 旅行</span>
                        <span><i class="far fa-comments"></i> 8条评论</span>
                    </div>
                    <p class="post-excerpt">今年春天，我有幸在日本度过了难忘的两周时光。从东京的繁华都市到大阪的美食天堂，再到京都的古朴寺庙，这次旅行让我对日本文化有了更深的理解...</p>
                    <a href="#" class="read-more">继续阅读 <i class="fas fa-arrow-right"></i></a>
                </div>
            </article>

            <!-- 文章3 -->
            <article class="blog-post">
                <img src="https://via.placeholder.com/800x400" alt="文章图片" class="post-image">
                <div class="post-body">
                    <h2 class="post-title">如何提高编程效率</h2>
                    <div class="post-meta">
                        <span><i class="far fa-calendar-alt"></i> 2023年4月10日</span>
                        <span><i class="far fa-folder-open"></i> 技术</span>
                        <span><i class="far fa-comments"></i> 15条评论</span>
                    </div>
                    <p class="post-excerpt">作为一名开发者，提高编程效率不仅能让我们更快完成任务，还能减少错误和返工。本文将分享我个人总结的10个提高编程效率的实用技巧，包括工具选择、工作流程优化等方面...</p>
                    <a href="#" class="read-more">继续阅读 <i class="fas fa-arrow-right"></i></a>
                </div>
            </article>

            <!-- 分页 -->
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
            <aside class="sidebar">
                <!-- 关于我 -->
                <div class="sidebar-widget about-me">
                    <h3 class="widget-title">关于我</h3>
                    <img src="https://via.placeholder.com/200x200" alt="作者头像">
                    <p>我是张三，一名前端开发工程师，热爱编程、摄影和旅行。在这里分享我的技术心得和生活感悟。</p>
                    <div class="social-icons d-flex justify-content-center">
                        <a href="#"><i class="fab fa-github"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fas fa-envelope"></i></a>
                    </div>
                </div>

                <!-- 分类 -->
                <div class="sidebar-widget">
                    <h3 class="widget-title">分类</h3>
                    <ul class="category-list">
                        <li><a href="#">技术 <span class="badge bg-primary float-end">24</span></a></li>
                        <li><a href="#">生活 <span class="badge bg-primary float-end">15</span></a></li>
                        <li><a href="#">旅行 <span class="badge bg-primary float-end">8</span></a></li>
                        <li><a href="#">摄影 <span class="badge bg-primary float-end">5</span></a></li>
                        <li><a href="#">读书 <span class="badge bg-primary float-end">12</span></a></li>
                    </ul>
                </div>

                <!-- 标签云 -->
                <div class="sidebar-widget">
                    <h3 class="widget-title">标签云</h3>
                    <div class="tag-list">
                        <a href="#">JavaScript</a>
                        <a href="#">CSS</a>
                        <a href="#">HTML</a>
                        <a href="#">Vue</a>
                        <a href="#">React</a>
                        <a href="#">前端</a>
                        <a href="#">设计</a>
                        <a href="#">摄影技巧</a>
                        <a href="#">东京</a>
                        <a href="#">京都</a>
                    </div>
                </div>

                <!-- 最新文章 -->
                <div class="sidebar-widget">
                    <h3 class="widget-title">最新文章</h3>
                    <div class="list-group">
                        <a href="#" class="list-group-item list-group-item-action">前端开发的最新趋势</a>
                        <a href="#" class="list-group-item list-group-item-action">我的日本旅行日记</a>
                        <a href="#" class="list-group-item list-group-item-action">如何提高编程效率</a>
                        <a href="#" class="list-group-item list-group-item-action">CSS Grid布局完全指南</a>
                        <a href="#" class="list-group-item list-group-item-action">2023年最佳摄影地点推荐</a>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="blog-footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 mb-4 mb-lg-0">
                <h3 class="mb-4"><i class="fas fa-pen-fancy me-2"></i>我的博客</h3>
                <p>分享编程知识、生活感悟和旅行见闻</p>
                <div class="social-icons mt-4">
                    <a href="#"><i class="fab fa-github"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 mb-4 mb-md-0">
                <h5 class="mb-4">快速链接</h5>
                <div class="row">
                    <div class="col-6">
                        <ul class="list-unstyled footer-links">
                            <li class="mb-2"><a href="#">首页</a></li>
                            <li class="mb-2"><a href="#">关于</a></li>
                            <li class="mb-2"><a href="#">技术</a></li>
                        </ul>
                    </div>
                    <div class="col-6">
                        <ul class="list-unstyled footer-links">
                            <li class="mb-2"><a href="#">生活</a></li>
                            <li class="mb-2"><a href="#">旅行</a></li>
                            <li><a href="#">联系</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <h5 class="mb-4">订阅更新</h5>
                <p>订阅我的博客，获取最新文章通知</p>
                <div class="input-group mb-3">
                    <input type="email" class="form-control" placeholder="您的邮箱地址">
                    <button class="btn btn-primary" type="button">订阅</button>
                </div>
            </div>
        </div>
        <hr class="mt-5 mb-4" style="border-color: rgba(255,255,255,0.1);">
        <div class="text-center">
            <p class="mb-0">&copy; 2023 我的博客. 保留所有权利.</p>
        </div>
    </div>
</footer>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>